<div class="border-left-0 border-bottom-0 border-right-0">
    <div class="card-header py-1">
        <span ng-bind="$ctrl.header"></span>
        <div class="row">
            <div class="col-md-1">
                <div class="form-check">
                    <input type="checkbox" ng-model="$ctrl.selectedList.isSelectAll"
                        ng-change="$ctrl.selectAll($ctrl.selectedList.isSelectAll)" class="form-check-input" />
                </div>
            </div>
            <div ng-repeat="col in $ctrl.columns | orderBy:'priority' track by $index" ng-if="$index < 3"
                class="col-md-2">
                <div class="input-group input-group-sm">
                    <div class="input-group-text"><i class="fas fa-search"></i></div>
                    <input type="text" class="form-control" placeholder="{{col.title}}"
                        ng-model="$ctrl.queries[col.name]" ng-enter="$ctrl.filter()" />
                </div>
            </div>
            <!-- <small class="col-md-2">Author</small> -->
            <label class="col-md-2">Created</label>
            <div class="col-md-3">
                <div class="input-group input-group-sm">
                    <select class="form-select form-select-sm me-2" ng-model="$ctrl.filterType">
                        <option ng-repeat="item in $ctrl.filterTypes" ng-value="item">{{item}}</option>
                    </select>
                    <select class="form-select form-select-sm me-2" ng-model="$ctrl.compareType">
                        <option ng-repeat="item in $ctrl.compareTypes" ng-value="item">{{item}}</option>
                    </select>
                    <a class="btn" ng-click="$ctrl.filter()"><i class="fas fa-search"></i></a>
                </div>
            </div>
        </div>
    </div>
    <div class="cardx">
        <div class="">
            <div class="p-3" role="alert" ng-if="!$ctrl.data || !$ctrl.data.length">
                <i class="fas fa-exclamation-triangle text-warning me-3"></i> No data has been created for this table
                yet!
            </div>

            <ul class="list-group list-group-flush" dnd-list="$ctrl.data" dnd-inserted="$ctrl.updateOrders(index)"
                ng-if="$ctrl.data.length">
                <li ng-repeat="item in $ctrl.data track by $index" dnd-draggable="item" dnd-type="'item'"
                    dnd-effect-allowed="copyMove" dnd-selected="$ctrl.selectedItem = item"
                    dnd-disable-if="!$ctrl.canDrag" dnd-dragstart="$ctrl.dragStart($index)"
                    ng-class="{'selected': $ctrl.selectedItem === item}"
                    class="list-group-item attr-set-value-item m-0">
                    <div class="row">
                        <div class="col-md-1 d-flex">
                            <!-- <small dnd-handle class="fa fa-grip-vertical fa-xs text-black-50 me-2"
                                style="cursor: grab"></small> -->
                            <svg dnd-handle style="cursor: grab" xmlns="http://www.w3.org/2000/svg"
                                class="icon icon-tabler icon-tabler-drag-drop-2 me-3" width="20" height="20"
                                viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none"
                                stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                <rect x="8" y="8" width="12" height="12" rx="2" />
                                <line x1="4" y1="4" x2="4" y2="4.01" />
                                <line x1="8" y1="4" x2="8" y2="4.01" />
                                <line x1="12" y1="4" x2="12" y2="4.01" />
                                <line x1="16" y1="4" x2="16" y2="4.01" />
                                <line x1="4" y1="8" x2="4" y2="8.01" />
                                <line x1="4" y1="12" x2="4" y2="12.01" />
                                <line x1="4" y1="16" x2="4" y2="16.01" />
                            </svg>
                            <input type="checkbox" ng-model="item.isSelected" ng-change="$ctrl.select(item)"
                                class="form-check-input" />
                            <!-- <small>
                                <input class="ml-1 border-0 p-0 text-center text-black-50" style="width: 25px"
                                    ng-model="item.priority" />
                            </small> -->
                        </div>
                        <div ng-if="$index < 3"
                            ng-repeat="column in $ctrl.columns | orderBy: 'priority' track by $index" class="col-md-2">
                            <mix-column-preview ng-if="column" model="item.obj[column.name]" column="column"
                                max-length="50">
                            </mix-column-preview>
                        </div>
                        <div class="col-md-2">
                            <small class="text-black-50 align-middle"
                                title="{{item.createdDateTime | utcToLocal:'dd.MM.yy hh:mm a'}}">
                                {{item.createdDateTime | utcToLocal:'dd.MM.yy'}}
                            </small>
                        </div>
                        <div class="col-md-3 border-0">


                            <div class="dropdown float-lg-end ms-auto pe-1">
                                <a href="javascript:;" class="cursor-pointer" id="dropdownTable2"
                                    data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="fa fa-ellipsis-h text-secondary" aria-hidden="true"></i>
                                </a>
                                <ul class="dropdown-menu px-2 py-3 ms-sm-n4 ms-n5" aria-labelledby="dropdownTable2"
                                    style="">
                                    <!-- <li>
                                        <a ng-click="$ctrl.sendMail(item)" class="dropdown-item border-radius-md">
                                            <span class="fa fa-envelope"></span>
                                        </a>
                                    </li> -->
                                    <li>
                                        <a class="dropdown-item border-radius-md" ng-click="$ctrl.view(item)">
                                            <span class="fa fa-eye"></span> Preview</a>
                                    </li>
                                    <li ng-if="item.detailsUrl">
                                        <a class="dropdown-item border-radius-md" target="_blank"
                                            href="{{item.detailsUrl}}">
                                            <span class="fa fa-link"></span> Config</a>
                                    </li>
                                    <li>
                                        <a ng-click="$ctrl.update(item)" class="dropdown-item border-radius-md">
                                            <span class="fa fa-pen"></span> Edit record
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item border-radius-md" ng-if="$ctrl.onDuplicate"
                                            ng-click="$ctrl.duplicate(item.id)">
                                            <span class="fas fa-copy"></span> Copy record
                                        </a>
                                    </li>
                                    <li>
                                        <a ng-click="$ctrl.delete(item)" class="dropdown-item border-radius-md">
                                            <span class="fas fa-trash-alt"></span> Delete record
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group btn-group-sm float-end me-3">
                                <!-- <a ng-click="$ctrl.sendMail(item)" class="btn btn-link text-primary">
                                    <span class="fa fa-envelope"></span>
                                </a> -->
                                <a class="btn btn-light" ng-click="$ctrl.view(item)">
                                    <span class="fa fa-eye"></span></a>
                                <!-- <a ng-if="item.detailsUrl" class="btn btn-link text-primary" target="_blank"
                                    href="{{item.detailsUrl}}">
                                    <span class="fa fa-link"></span></a> -->
                                <a ng-click="$ctrl.update(item)" class="btn btn-light">
                                    <span class="fa fa-pen"></span>
                                </a>
                                <!-- <a class="btn btn-link" ng-if="$ctrl.onDuplicate" ng-click="$ctrl.duplicate(item.id)">
                                    <span class="fas fa-copy text-primary"></span>
                                </a>
                                <a ng-click="$ctrl.delete(item)" class="btn btn-link text-danger">
                                    <span class="fas fa-trash-alt"></span>
                                </a> -->
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>